<script setup lang="ts">
import { useChannelStore } from '@/stores/channel';
import type { ArticleItem, ArticleResData, axiosResData } from '@/types/type';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

//路由跳转
const router =useRouter()


// const Props=defineProps<{
//   channelId:number
// }>()
const store =useChannelStore()
const list=ref<ArticleItem []>([])
watch(()=>store.channelId,async ()=>{
  console.log('监听到channelId变化了');
  const res = await axios.get<axiosResData<ArticleResData>>('https://geek.itheima.net/v1_0/articles',
    {
      params:{
        channel_id:store.channelId,
        timestamp:Date.now()
      }
    }
  )
list.value=res.data.data.results
},{immediate:true})





</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id"@click="router.push(`/detail/${item.art_id}}`)">
      <p class="title">{{ item.title }}</p>
      <img v-for="url in item.cover?.images" class="img" :src="url" alt="" >
     
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>